<template>
  <div>
    <h1>给客户配角色</h1>
    <table border="1px" cellspacing="0">
      <tr>
        <td>角色名称</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data" :key="i">
        <td>{{ i.name }}</td>
        <td><button @click="add(i.id)">添加</button></td>
      </tr>
    </table>
    <table>
      <tr><td>已经有的角色</td><td>操作</td></tr>
      <tr v-for="i in data1" :key="i.id"><td>{{i.name}}</td><td><button @click="delr(i.id)">删除</button></td></tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "addrole",
  data() {
    return {
      data: "",
      uid: 1,
      data1:"",
    };
  },
  methods: {
    getrole() {
      axios({ url: "/getallrole", methods: "get" }).then((res) => {
        this.data = res.data.list;
      });
    },
    add(id) {
      axios({
        url: "/addjiaose",
        method: "post",
        data: { roleid: id, uid: this.uid },
      }).then(res=>{
        console.log(res)
      });
    },
    getrole1(){
      axios({url:'/getkerole',method:'get',params:{uid:this.uid}}).then(res=>{
        console.log(res)
        this.data1=res.data.list
      })
    },
    delr(id){
      axios({url:'/delyongrole',method:'post',data:{id:id,uid:this.uid}}).then(res=>{
        console.log(res)
      })
    },
  },
  mounted() {
    this.getrole();
    this.getrole1();
  },
};
</script>

<style scoped></style>
